<template>
  <div>
    <h1>ref的响应式数据：{{ count }}</h1>
    <h1>计算属性：{{ doubleCount }}</h1>
    <button @click="say">点击</button>
    <hr />
    <h1 class="title">{{ title }}</h1>
    <h1 class="time">{{ time }}</h1>
    <h1 @click="run">计算属性：{{ timeCup }}</h1>
    <div class="list" v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <hr />
    <input type="text" v-model="myname" />
    <h1>{{ myname }}</h1>
    <input type="text" v-model="age" />
    <h1>{{ age }}</h1>
  </div>
</template>
<script lang="ts">
// vue是compostion Api的开发方式
// 方法需要导入使用

// 1 .vue3的setup 新的option,
//  所有的组合API函数都在此使用, 只在初始化时执行一次
// 替代了 vue2的beforeCreate和created
// ------------------------------------------
// 2. ref 定义一个数据的响应式的数据
// let count=ref(初始值);
// ref 创建的数据在js中使用 count.value  count.value="值"

// 3 计算属性 computed
// let cc=computed(() => {})

// 4 reactive 作用: 定义多个数据的响应式

// 5 toRefs方法
// 把一个响应式对象转换成普通对象，
// 该普通对象的每个 property 都是一个 ref
import countHook from './hooks/countHook'
import listHook from './hooks/listHook'
import { watch, toRefs, ref, computed, reactive, ComputedRef } from 'vue'
export default {
  setup (props: any) {
    // 计算功能函数
    var obj = countHook()
    // list部分功能
    var datas = listHook()

    let myname = ref('李连杰')
    watch(myname, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    interface Imck {
      age: number
    }
    let mck: any = reactive({
      age: 0
    })
    // 监听reactive的变化
    watch(
      () => mck.age,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        deep: true, //深度监听
        immediate: true //首次进入就监听
      }
    )

    return {
      ...obj,
      ...datas,
      myname,
      ...toRefs(mck)
    }
  }
}
</script>
<style lang="less"></style>
